<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="padding: 0 16rpx;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="order" :style="{ '--app-color': app_color }">
			<view class="topNav">
				<u-tabs :list="tabs" @click="tabsClick" :scrollable="true" :lineColor="app_color" :current="current"
					lineWidth="30"></u-tabs>
			</view>
			<view class="scrollY" :class="orderList.length > 0 ? '' : 'alc'">
				<scroll-view scroll-y @scrolltolower="scrolltolower" @scroll="scroll" :scroll-top="scrollTop"
					style="flex: 1;">
					<view class="order-list" v-for="(list, key) in orderList" v-if="orderList.length > 0">
						<!-- 订单头部 -->
						<view
							style="display: flex;flex-direction: row;justify-content: space-between; font-size: 14px;">
							<text style="font-size: 16px;color: #333">{{ list.c_time | date('yyyy年mm月dd日') }}</text>
							<view style="display: flex;flex-direction: row; align-items: center;">
								<text style="color: #F1454D;" v-if="list.type == 2">已支付</text>
								<text style="color: var(--app-color);" v-if="list.type == 1">待支付</text>
								<text style="color: var(--app-color);" v-if="list.type == 3">待收货</text>
								<view
									style="color: #999999; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16rpx;"
									v-if="list.type >= 4">
									<view>完成</view>
									<view>|</view>
									<view style="display: flex; align-items: center;">
										<u-icon name="trash" color="#999999" size="14"
											@click='delOrder(list.id, key)'></u-icon>
									</view>
								</view>
							</view>
						</view>
						<!-- 订单商品内容 -->
						<view v-for="goods in list.goods_info">
							<!-- 第一种样式 -->
							<view style="margin: 5px 0;" v-if="goods.spec.length > 1">
								<text class="u-line-1" style="color: #333;font-size: 28rpx;">{{ goods.title }}</text>
								<view style="display: flex;flex-direction: row;align-items: center;">
									<scroll-view class="order-goods-img" :scroll-x="true">
										<view style="width: 70px;display: inline-block;margin: 5px 5px 0px 0;"
											v-for="spec in goods.spec">
											<view class="spec-list"
												style="display: flex;flex-direction: column;text-align: center;">
												<image :src="spec.img"></image>
												<text style="font-size: 12px;color: #666">× {{ spec.num }}件</text>
											</view>
										</view>
									</scroll-view>
									<text @click="pingjia(list.id, goods.goods_id)"
										v-if="list.type == 4 && goods.pingjia == 0"
										style="font-size: 14px;color: #ffaa7f;width:50px;text-align: right;">去评价</text>
								</view>
							</view>

							<!-- 第二种样式 -->
							<view style="display: flex;flex-direction: row;" v-else>
								<view style="width: 160rpx; flex-shrink: 0;">
									<image style="width: 160rpx;height: 160rpx; border-radius: 12rpx;"
										:src="goods.spec[0].img" mode="aspectFill"></image>
								</view>
								<view
									style="display: flex;flex: 1; flex-direction: column; justify-content: center; margin-left: 16rpx;position: relative; gap: 16rpx;">
									<text class="u-line-1" style="font-size: 14px;color: #333;">{{ goods.title }}</text>
									<text style="font-size: 14px;color: #666">规格：{{ goods.spec[0].name }} × {{
										goods.spec[0].num
									}}</text>
									<view style="display: flex; justify-content: space-between;">
										<text style="color: #333; font-size: 28rpx;">￥{{ goods.spec[0].shop_price
										}}</text>
										<!-- 单个商品评价 -->
										<text @click="pingjia(list.id, goods.goods_id)"
											v-if="list.type == 4 && goods.pingjia == 0"
											style="font-size: 14px;color: #ffaa7f;width:50px;text-align: right;">去评价</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 订单商品统计 -->
						<view style="display: flex;flex-direction: row;justify-content: flex-end;">
							<text style="font-size: 14px;color: #666">
								共<text style="font-weight: 600;">{{ list.goods_all_num }}</text>件
								<text style="margin-left: 5px;">实付￥{{ list.money }}
									<text v-if="list.freight_money > 0" style="color: #666;font-size: 12px;">（含运费：{{
										list.freight_money }}）</text>
								</text>
							</text>
						</view>

						<!-- 订单状态 -->
						<view
							style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center; padding-top: 16rpx; gap: 4px; border-top: 1rpx solid rgba(0,0,0, 0.1);"
							v-if="list.type < 4">
							<!-- 等待支付 -->
							<template v-if="list.type == 1 && list.pay_status == 0">
								<template v-if="time < (list.c_time + 900)">
									<text style="font-size: 13px;color: var(--app-color);">剩余支付时间：</text>
									<u-count-down :time="(orderList[key].c_time + 900 - time) * 1000" format="HH:mm:ss"
										autoStart millisecond @change="onChange($event, key)">
										<text style="font-size: 13px;color:var(--app-color);">{{
											list.timeData.minutes }}分{{ list.timeData.seconds }}秒</text>
									</u-count-down>
									<moxi-btn :color="app_color" @click='pay(list.pay_id)'
										style="margin-left: 24rpx;">立即支付</moxi-btn>
								</template>
								<view v-else style="font-size: 13px;color: #ff5500;display: flex;;flex-direction: row;">
									<u-icon name="info-circle" color="#ff5500" size="15"></u-icon>
									<text style="margin-left: 4px;">订单支付超时</text>
								</view>
							</template>
							<!-- 等待商家发货 -->
							<template v-if="list.type == 2">
								<text style="color: var(--app-color);font-size: 28rpx; padding: 8rpx 0;">等待商家发货</text>
							</template>
							<!-- 确认收货 -->
							<template v-if="list.type == 3">
								<moxi-btn v-if="list.express_id > 0" color="#ffffff"
									@click='express_info(list.id)'>查看物流</moxi-btn>
								<moxi-btn color="#ff5500" @click='confirm(list.id, key)'
									style="margin-left: 12rpx;">确认收货</moxi-btn>
							</template>
							<!-- 去评价 -->
							<!-- <template v-if="list.type == 4">
								<view>
									<moxi-btn @click='delOrder(list.id, key)'>删除订单</moxi-btn>
								</view>
								<view>
									<moxi-btn>评价晒单</moxi-btn>
								</view>
								<moxi-btn color="#ff5500" @click='shouhou(list.id)'>申请售后</moxi-btn>
							</template> -->
						</view>
					</view>
					<view v-if="!hasMore && orderList.length > 0" style="margin-bottom: 16rpx;">
						<u-empty text="-没有更多订单了-" iconSize="0">
						</u-empty>
					</view>
					<!-- 订单更换图 -->
					<u-empty v-else mode="order" width="300" height="300" text="暂无符合状态订单...">
					</u-empty>
				</scroll-view>
			</view>
		</view>
		<!-- 商品评价 -->
		<view>
			<u-popup :show="pingjiaInfo.show" safeAreaInsetBottom mode="bottom" round="10"
				@close="pingjiaInfo.show = false" closeOnClickOverlay closeable :overlayStyle="{ zIndex: '2' }"
				:zIndex="3" :customStyle="{ maxHeight: '80vh' }">
				<view class="popup_con">
					<view class="popup_con_title">商品评价</view>
					<view style="flex: 1; overflow: hidden scroll; margin: 8px 15px 0;">
						<view class="pingjia-list">
							<text class="pingjia-title">总体评价：</text>
							<u-radio-group v-model="pingjiaInfo.type">
								<u-radio :activeColor="app_color" :name="1" label="好评"></u-radio>
								<view style="margin: 0 20px;">
									<u-radio :activeColor="app_color" :name="2" label="中评"></u-radio>
								</view>
								<u-radio :activeColor="app_color" :name="3" label="差评"></u-radio>
							</u-radio-group>
						</view>
						<view class="pingjia-list">
							<text class="pingjia-title">服务评分：</text>
							<u-rate :count="5" :active-color="app_color" v-model="pingjiaInfo.rate"></u-rate>
						</view>
						<view class="pingjia-list">
							<text class="pingjia-title">评价图片：</text>
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
								:maxCount="6" multiple :previewFullImage="true"></u-upload>
						</view>
						<view class="pingjia-list">
							<text class="pingjia-title">评价内容：</text>
							<u--textarea v-model="pingjiaInfo.content" placeholder="请输入内容"></u--textarea>
						</view>
						<view style="margin: 10px 0;">
							<u-button @click="pingjia()" text="发布评价" :color="app_color"></u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 查看物流 -->
		<view>
			<u-popup :show="express.show" @close="express.show = false" round="10">
				<view style="height: 800rpx;padding: 10px;display: flex;flex-direction: column;overflow: auto;">
					<view style="font-size: 14px;color: #666;display: flex;flex-direction: row;">
						<text>物流公司：</text>
						<text>{{ express.info.Name }}</text>
						<view style="margin-left: 5px;margin-top: 3px;">
							<u-icon :name="express.info.Logo" size="14"
								v-if="express.info.Logo && express.info.Logo.length"></u-icon>
						</view>
					</view>
					<view style="font-size: 14px;color: #666;display: flex;flex-direction: row;margin: 5px 0;">
						<text>运单号码：</text>
						<text>{{ express.info.LogisticCode }}</text>
					</view>
					<u-line></u-line>
					<view style="margin: 10px 0;">
						<u-steps :dot="true" :activeColor="app_color" direction="column" v-if="express.info.Traces">
							<u-steps-item :title="list.AcceptStation" :desc="list.AcceptTime"
								v-for="list in express.info.Traces">
							</u-steps-item>

						</u-steps>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 删除订单 -->
		<view>
			<u-modal :show="confirmInfo.delShow" @cancel="confirmInfo.delShow = false" @confirm="delOrder()"
				content="删除订单后将无法恢复!" confirmColor="#2979ff" :showCancelButton="true">
			</u-modal>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList1: [],
			express: {
				show: false,
				info: {}
			},
			tabs: [{
				name: '全部',
				value: 0
			}, {
				name: '待支付',
				value: 1
			}, {
				name: '待发货',
				value: 2
			}, {
				name: '待收货',
				value: 3
			}, {
				name: '待评价',
				value: 4
			}
				// , {
				//                 name: '售后',
				// 	value:5
				//             }
			],
			hasMore: true,
			page: 1,
			page_num: 10,
			info: {
				page: 0,
				page_num: 0,
				type: 0
			},
			orderList: [],
			current: 0,
			time: 0,
			confirmInfo: {
				delShow: false,
				show: false,
				orderId: "",
				key: ''
			},
			pingjiaInfo: {
				show: false,
				orderId: "",
				goods_id: '',
				type: 1,
				rate: 5,
				img_list: [],
				content: ''
			},
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
		}
	},
	onLoad() {
		// uni.clearStorage();
		// #ifdef H5
		this.navHeight = 0;
		// #endif

		if (this.param.type) {
			this.info.type = this.param.type;
			for (let k in this.tabs) {
				if (this.tabs[k].value == this.info.type) {
					this.current = k;
				}
			}
		}
		this.time = new Date().getTime() / 1000;
		let self = this;
		setInterval(function () {
			self = self + 1;
		}, 1000)
		this.get()
	},
	mounted() {

	},

	methods: {
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop() {
			// 解决view层不同步的问题
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function () {
				this.scrollTop = 0
			});
		},
		savePingjia() {
			this.moxiPost('/plugin/mall/user/')
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				this.pingjiaInfo.img_list.push(result);

				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				this.moxiUpload(url, function (data) {
					resolve(data)
				})
			})
		},
		deletePic(event) {
			this.pingjiaInfo.img_list.splice(event.index, 1)
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		pingjia(orderId = false, goods_id = false) {
			if (orderId) {
				this.pingjiaInfo.order_id = orderId;
				this.pingjiaInfo.goods_id = goods_id;
				this.pingjiaInfo.type = 1;
				this.pingjiaInfo.rate = 5;
				this.pingjiaInfo.img_list = [];
				this.pingjiaInfo.content = '';
				this.$forceUpdate();
				this.$nextTick(() => {
					this.pingjiaInfo.show = true;
				})
			} else {
				let self = this;
				this.moxiPost('/plugin/mall/user/order/evaluate', this.pingjiaInfo, function (data) {
					self.msg('评价成功！')
					self.pingjiaInfo.show = false;
					for (let k in self.orderList) {
						if (self.orderList[k].id == self.pingjiaInfo.order_id) {
							for (let g in self.orderList[k].goods_info) {
								if (self.orderList[k].goods_info[g].goods_id == self.pingjiaInfo.goods_id) {
									self.orderList[k].goods_info[g].pingjia = 1;
									break;
								}
							}
							break;
						}
					}
				})
			}
		},
		express_info(orderId) {
			let self = this;
			this.moxiPost('/plugin/mall/user/order/express_info', { id: orderId }, function (data) {
				self.express.info = data.data.info;
				if (self.express.info.Traces) {
					self.express.info.Traces.reverse()
				}
				self.express.show = true;
			})
		},
		delOrder(orderId = false, key = false) {
			if (orderId) {
				this.confirmInfo.delShow = true;
				this.confirmInfo.key = key;
				this.confirmInfo.orderId = orderId;
			} else {
				let self = this;
				this.moxiPost('/plugin/mall/user/order/del_order', { id: this.confirmInfo.orderId }, function (data) {
					self.orderList.splice(self.confirmInfo.key, 1);
					self.msg('删除成功！')
				})
				this.confirmInfo.delShow = false;
			}
		},
		confirm(orderId = false, key = false) {
			this.isBox('提示', (res) => {
				this.confirmInfo.orderId = orderId;
				this.confirmInfo.key = key;
				let self = this;
				this.moxiPost('/plugin/mall/user/order/sure', { id: this.confirmInfo.orderId }, function (data) {
					self.orderList[self.confirmInfo.key].type = 4;
					self.msg(data.hint);
				})

			}, '请确保您已收到货品!')
		},
		pay(pay_id) {
			const url = 'pages/index/pay?pay_id=' + pay_id + '&btn_name=查看订单&path=' + encodeURIComponent('page_mall/order/order')
			this.navto(url, true)
		},
		onChange(e, key) {
			this.orderList[key].timeData = e;
		},
		get(page) {
			if (page) {
				this.page = page;
			}
			this.info.page = this.page;
			this.info.page_num = this.page_num;
			let self = this;
			this.moxiPost('/plugin/mall/user/order/get', this.info, function (data) {

				if (data.data.allpage <= self.info.page) {
					self.hasMore = false;
				}

				for (let k in data.data.data) {
					data.data.data[k].goods_all_num = 0;//商品总数量
					for (let g in data.data.data[k].goods_num) {
						data.data.data[k].goods_all_num = Number(data.data.data[k].goods_num[g]) + data.data.data[k].goods_all_num;
					}
					data.data.data[k].timeData = {};
					self.orderList.push(data.data.data[k]);
				}
			})
		},
		tabsClick(e) {
			this.info.type = e.value;
			this.orderList = [];
			this.page = 1;
			this.hasMore = true;
			this.goTop();
			this.get(1);
		},
		scrolltolower() {
			if (this.hasMore) {
				this.page++;
				this.get();
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.order-list {
	padding: 16rpx 20rpx;
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-bottom: 32rpx;
	border-radius: 12rpx;
	gap: 16rpx;
}


.order {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
}

.scrollY {
	flex: 1;
	overflow: hidden;
	display: flex;
}

.alc {
	align-items: center;
}

.order-goods-img {
	overflow: auto;
	white-space: nowrap;
}

.order-goods-img image {
	width: 70px;
	height: 70px;
	margin: 5px 8px 5px 0;
	border-radius: 4px;
}

.order-btn {
	padding: 5px 14px;
	border-radius: 25px;
	border: 1px #ccc solid;
	font-size: 14px;
	;
}

.pingjia-list {
	display: flex;
	flex-direction: row;
	padding: 15px 0;
	border-bottom: 1px dashed #dddddd;
}

.pingjia-title {
	width: 80px;
	font-size: 14px;
	color: #666;
}

.popup_con {
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1;
	overflow: hidden scroll;

	&_title {
		position: absolute;
		left: 15px;
		top: 13px;
		font-size: 18px;
		font-weight: bold;
	}

	&_close {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	&_showScroll {
		flex: 1;
		margin-top: 8px;
	}

	&_noData {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 30vh;
	}
}
</style>